<!DOCTYPE html>
<html>
	<head>	
		<meta charset="utf-8">
		<title>Main Page</title>
        
        <!---BTP PART 2 STARTED--->
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<link href= "jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="geolocation.js"></script>
		<script src="jquery-1.6.4.js" type="text/javascript"></script>
        
		<script src="jquery.mobile-1.0.js" type="text/javascript"></script>
         <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5OSSGgHrwxxYxBwVuSOlzt-Ruv7NkhDQ&sensor=false&libraries=places">
    </script>     
        <!--<script type="text/javascript" src="googlemap.js"></script>-->

         <!--<link rel="stylesheet" type="text/css" href="webrupee.css">

		<script src="webrupee.js" type="text/javascript"></script>-->
        
         <link rel="stylesheet" type="text/css" href="http://cdn.webrupee.com/font">
    	 <script src="http://cdn.webrupee.com/js" type="text/javascript"></script>
        
        <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>->
        
        
        <!--
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
        <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
        
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
        <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
        -->
        
        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>-->
        
        <!--<script type="text/javascript" src="jquery-1.6.4.min.js"></script> 
        <script text="text/javascript" src="jquery.mobile-1.0.min.js"></script>
        <script text="text/javascript" src="googlemapsscript.js"></script>
        <script type="text/javascript" src="googleapi.jquery.js"></script>-->
        <script type="text/javascript" src="initialscript.js"></script>
        <script type="text/javascript" src="autoscript.js"></script>
        <script type="text/javascript" src="taxiscript.js"></script>
        <script type="text/javascript" src="transitscript.js"></script>  
        <script type="text/javascript" src="lastmetroscript.js"></script>
        <script type="text/javascript" src="locationsaver.js"></script>
        <script type="text/javascript" src="tourist-to.js"></script>
        <script type="text/javascript" src="tourist-from.js"></script>
        <!--<script>
		$(document).on("swiperight", function(event, ui) {
		$( "#mypanel" ).panel( "open" );
		});
		</script>-->

	</head>

<body onLoad="initialize()">

<!----------------------------------------/MAIN PAGE------------------------------------------------->

<div data-role="page" id="main" data-theme="g">

	<div data-role="header" data-theme="a">
		<h1>Fair Fare</h1>
        
        
        <div class="ui-btn-right" data-type="horizontal">
   		   <a href="#myprofilepage" data-theme="c" data-role="button" data-icon="my-app-profile" data-iconpos="notext" data-inline="true" onClick="initialchecker()"></a>        
        </div>

        <!--<div class="ui-btn-left" data-type="horizontal">
   		   <a  name="use GPS" id="gps" href="#gpspage" data-theme="c" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-gps" data-iconpos="notext" onclick="start_gps(2,0); makebuttonsdisabled();"></a>      
        </div>-->

	</div>
   <div data-role="content">    
  
    <div data-role="fieldcontain" align="center">
      <p>
        <label for="textinput"></label>
        <input type="text" name="from" id="from" value="" placeholder="From"  onFocus="this.select(); this.focus;" style="width:80%;" onClick="this.select(); this.focus;" onTap="this.focus; this.select();" data-theme="c"/>
        <a  name="usehomein-from" id="usehomein-from" data-role="button" data-inline="true"  data-mini="true" data-icon="home" data-iconpos="notext" onclick="gethomeloc(1)" data-theme="c"></a>
        <a  name="useworkin-from" id="useworkin-from" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-suitcase" data-iconpos="notext" onclick="getworkloc(1)" data-theme="c"></a>
        <a  name="usegpsin-from" id="usegpsin-from" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-pin" data-iconpos="notext" onclick="start_gps(1,1);" data-theme="c"></a>
        <a name="tourist-from" id="tourist-from" href="#tourist-from" data-role="button" data-icon="star" data-iconpos="notext" data-inline="true" data-theme="c"></a>
      </p>
     
      <p>
        <label for="textinput2"></label>
        <input type="text" name="to" id="to" value=""  placeholder="To" OnClick="this.focus(); this.select();" style="width:80%;" onFocus="this.select(); this.focus;" onTap="this.focus; this.select();" data-theme="c"/>
        
        <a  name="usehomein-to" id="usehomein-to" data-role="button" data-inline="true" data-mini="true" data-icon="home" data-iconpos="notext" onclick="gethomeloc(2)"data-theme="c">Home</a>
        <a  name="useworkin-to" id="useworkin-to" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-suitcase" data-iconpos="notext" onclick="getworkloc(2)" data-theme="c">Work</a>
        <a  name="usegpsin-to" id="usegpsin-to" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-pin" data-iconpos="notext" onclick="start_gps(1,2);" data-theme="c"></a>
        <a name="tourist-to" id="tourist-to" href="#tourist-to" data-role="button" data-icon="star" data-iconpos="notext" data-inline="true" data-theme="c"></a>
        
      </p>
            
      
        <!--<input name="datepicker" id="datepicker" placeholder="" value="" type="date" />-->
        <input name="timepicker" id="timepicker" placeholder="" value="" type="datetime-local" onChange="timesaver()" style="width:80%;" data-theme="c"/>
        <!--margin-right:160px; alignment-adjust:central;-->
                     
    </div>
    
    <div  align="center" style="margin-top:50px;">
    
     <a  name="go" id="go" href="" data-inline="true" data-role="button" data-theme="a" onclick="checkiffilled()">Go</a>
 
     <script>
	 function checkiffilled()
	 {
	   var from = document.getElementById('from').value;
	   var to = document.getElementById('to').value;
	   if (($.trim(from)!="" && $.trim(to)!="") && ($.trim(from)!=$.trim(to)))   
	   {
		   $("a[name='go']").attr('href','#tabpage');
		   transit_calcRoute(0); 
		   auto_calcRoute(0,0); 
		   taxi_calcRoute(0,0);
	   }
	   else
	   {
		   $("a[name='go']").attr('href','');
		   alert("Enter valid location name(s)!");
	   }
	 }
	 </script>
		   
    </div> 
    </div>
      
    
 </div>
</div>


<!--------------------------------- NAVIGATION PAGE ----------------------------------

<div data-role="page" id="menu" data-add-back-btn="true">

  	<div data-role="header">
		<h1>Menu</h1>
    </div>
    <div align="center" style="padding-top:100px;">
   		   <a href="#myprofilepage" data-role="button" data-icon="my-app-profile" data-inline="true" onClick="initialchecker()" >My Profile</a>      
        </div>
        
        <div align="center">
   		   <a href="#tourist" data-role="button" data-icon="star" data-inline="true" >Attractions</a>      
        </div>
    
   
</div>

-------------------------------------------------------->

<!----------------------------------------/TAB PAGE------------------------------------------------->
<div data-role="page" id="tabpage" data-add-back-btn="true" data-theme="g">

  	<div data-role="header">
		<h1>Fair Fare</h1>
    </div>
    
   <script>
   	var distance = localStorage.getItem('dist');
	//console.log(distance);
   </script>

  <div data-role="content">
    <p align="center">    
    <ul data-role="listview" data-theme="d">
      <li><a href="#auto" onClick="auto_calcRoute(0,1);">
        <img src="images/Auto.jpg" name="autoimg"">
        <h3>Auto</h3>
        <span class="WebRupee" style="float:left">Rs. </span>
        <div id="automain_fare"></div>
		<div id="automain_outputdist"></div>
        <!--<script>$('#outputdist').empty();</script>-->
        <div id="automain_outputtime"></div>
        <!--<script>$('#outputtime').empty();</script>-->
      </a></li>
      <li><a href="#taxi" onClick="taxi_calcRoute(0,1);">
        <img src="images/Taxi.jpg" width="200" height="204" name="taxiimg">
        <h3>Taxi</h3>
		<span class="WebRupee" style="float:left">Rs. </span>
        <div id="taximain_easy_fare"></div> 
        <span class="WebRupee" style="float:left">Rs. </span>   
        <div id="taximain_quick_fare"></div>                                       
		<div id="taximain_outputdist"></div>
        <!--<script>$('#outputdist').empty();</script>-->
        <div id="taximain_outputtime"></div>
        <!--<script>$('#outputtime').empty();</script>-->
      </a></li>
      <li><a href="#transit" onClick="transit_calcRoute(1);">
        <h3>Metro & Bus</h3>
        <img src="images/Metro&Bus.jpg" width="200" height="204" name="metroimg">
        <span class="WebRupee" style="float:left">Rs. </span>
        <div id="transitmain_fare"></div>         
		<div id="transitmain_outputdist"></div>
        <!--<script>$('#outputdist').empty();</script>-->
        <div id="transitmain_outputtime"></div>
        <!--<script>$('#outputtime').empty();</script>-->
      </a></li>    </ul>
  </div>

</div>
<!----------------------------------------/MY PROFILE PAGE------------------------------------------------->
<div data-role="page" id="myprofilepage" data-add-back-btn="true" data-theme="g">

  	<div data-role="header">
		<h1>My Profile</h1>
    </div>
    
    <div data-role="content" data-theme="red">    
      <div data-role="fieldcontain" align="center">
        <p>
          <label for="textinput3">Home: </label>
          <input type="text" name="homelocationsaver" id="homelocationsaver" value="" style="width:80%;"data-theme="c"/>
          <a  name="save" id="save" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-tick" data-iconpos="notext" data-theme="c" onclick="sethomeloc(); enablehomebutton();"></a>
          <a  name="clear" id="clear" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-cross" data-iconpos="notext" onclick="deletehomeloc();"></a>
          <a  name="get from" id="get from" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-pin" data-iconpos="notext" onclick="start_gps(1,3);"></a>
	      <!--<a  name="retrieve" id="retrieve" data-role="button" data-inline="true" data-mini="true" onclick="dataretriever()">Retrieve</a>-->
        </p>
        <p> 
         <label for="textinput4">Work:</label>
          <input type="text" name="worklocationsaver" id="worklocationsaver" value="" style="width:80%;"data-theme="c"/>
          <a  name="save2" id="save2" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-tick" data-iconpos="notext" data-theme="c" onclick="setworkloc(); enableworkbutton();"></a>
          <a  name="clear2" id="clear2" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-cross" data-iconpos="notext" onclick="deleteworkloc();"></a>          
          <a  name="get from" id="get from" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-pin" data-iconpos="notext" onclick="start_gps(1,4);"></a>
	      <!--<a  name="retrieve" id="retrieve" data-role="button" data-inline="true" data-mini="true" onclick="dataretriever()">Retrieve</a>-->
        </p> 
     </div>
    </div>
    
  
</div>

<!----------------------------------------/GPS PAGE------------------------------------------------->
<div data-role="page" id="gpspage" data-add-back-btn="true" data-theme="g">

  	<div data-role="header">
		<h1>GPS Page</h1>
    </div>
    
	<div data-role="content" class="map_canvas" style="border:thin;" align="center"> 
		<div id="gps_map" align="center" style="height:180px;"></div>  
        
        <div align="center">
            <div align="center">
            	<p>
                  <a name="startj" id="startj" href="#" data-role="button" onClick="start_gps(3,0);" data-icon="" data-inline="true" >Start Journey</a>
            	  <a name="endj" id="endj" href="#" data-role="button" onClick="makecalculateenabled()" data-icon="" data-inline="true" >End Journey</a>
            	  <a name="calcj" id="calcj" href="#" data-role="button" onClick="" data-icon="" data-inline="true"  data-theme="c">Calculate Fare</a>
                  </p>
            </div>
          </div>
  
    </div>
</div>

       
<!----------------------------------------/AUTO PAGE------------------------------------------------->      
<div data-role="page" id="auto" data-theme="h" class="page-map" style="height:100%;width:100%; position:relative" data-add-back-btn="true">
    
     <!--<div data-role="panel" id="mypanel" data-display="overlay">
        <h3>Left Panel: Reveal</h3>
            <p>This panel is positioned on the left with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
            
    </div>-->
     <div data-role="header">
		<h1>Auto</h1>
        <div class="ui-btn-right" data-type="horizontal">
     		<a href="#autoinfo" data-theme="c" data-role="button" data-icon="info" data-iconpos="notext" data-inline="true" ></a>
			<!--<a href="#mypanel" data-role="button" data-icon="plus" data-inline="true" >Options</a>-->
     	</div>     
        
	</div>
    
	<div data-role="content" class="map_canvas" style="border:thin;" align="center"> 
		<div id="auto_map" align="center" style="height:250px; width:device-width;"></div>
        <div id="automap_fare" align="center" style="margin-top:10px;"></div>        
  	 	<div id="automap_outputdist" align="center"></div>
        <div id="automap_outputtime" align="center"></div>
          <div align="center" >
            	<a href="#" data-role="button" onClick="auto_calcRoute(-1,1)" data-icon="arrow-l" data-iconpos="notext" data-inline="true"></a>
                Routes
            	<a href="#" data-role="button" onClick="auto_calcRoute(1,1)" data-icon="arrow-r" data-iconpos="notext" data-inline="true"></a>
          </div>      
           <div><a href="#auto_directions" data-role="button" onClick="auto_getdirections()" data-inline="true" data-mini="true">Read directions</a>
           </div>
         
   	</div>
</div> 

<div data-role="page" id="auto_directions" data-add-back-btn="true">
  <div data-role="header">
    <h1>Auto Directions</h1>
  </div>
  <div data-role="content">
		<div id="auto_directions-panel"></div>
  </div>
</div>


<!----------------------------------------/TAXI PAGE------------------------------------------------->      
<div data-role="page" id="taxi" data-theme="g" class="page-map" style="height:100%;width:100%; position:relative" data-add-back-btn="true">
    
     <div data-role="header">
		<h1>Taxi</h1>
        <div class="ui-btn-right" data-type="horizontal">
     		<a href="#taxiinfo" data-theme="c" data-role="button" data-icon="info" data-iconpos="notext"data-inline="true" >Info</a>
     	</div>           
	</div>
    
	<div data-role="content" class="map_canvas"> 
		<div id="taxi_map" style="height:200px; width:device-width;"></div>
        <div id="taximap_meru_fare" align="center" style="margin-top:10px;"></div>   
        <div id="taximap_easy_fare" align="center"></div>    
        <div id="taximap_quick_fare" align="center"></div>                    
 	 	<div id="taximap_outputdist" align="center"></div>
        <div id="taximap_outputtime" align="center"></div>
        <div align="center">
            <a href="#" data-role="button" onClick="taxi_calcRoute(-1,1)" data-icon="arrow-l" data-iconpos="notext" data-inline="true"></a>
            Routes
            <a href="#" data-role="button" onClick="taxi_calcRoute(1,1)" data-icon="arrow-r" data-iconpos="notext" data-inline="true"></a>          </div>         
        <div align="center">
        <a href="#taxi_directions" data-role="button" onClick="taxi_getdirections()" data-inline="true" data-mini="true">Read directions</a>
        </div>
	</div>
</div> 

<div data-role="page" id="taxi_directions" data-add-back-btn="true">
  <div data-role="header">
    <h1>TAXI Directions</h1>
  </div>
  <div data-role="content">
		<div id="taxi_directions-panel"></div>
  </div>
</div>


<!----------------------------------------/TRANSIT PAGE------------------------------------------------->      
<div data-role="page" id="transit" data-theme="j" class="page-map" style="height:100%;width:100%; position:relative" data-add-back-btn="true">
    
     <div data-role="header">
		<h1>Transit</h1>
        <div class="ui-btn-right" data-type="horizontal">
     		<a href="#transitinfo" data-theme="c" data-role="button" data-icon="info" data-iconpos="notext" data-inline="true" >Info</a>
     	</div>           
	</div>
    
	<div data-role="content" class="map_canvas"> 
		<div id="transit_map" style="height:250px; width:device-width;"></div>
        <div id="transitmap_fare" align="center" style="margin-top:10px;"></div>  
  	 	<div id="transitmap_outputdist" align="center"></div>
        <div id="transitmap_outputtime" align="center"></div>
         <div align="center">
        <a href="#transit_directions" data-role="button" onClick="transit_getdirections()" data-inline="true" data-mini="true">Read directions</a>        
        </div>
	</div>
</div> 

<div data-role="page" id="transit_directions" data-add-back-btn="true">
  <div data-role="header">
    <h1>Transit Directions</h1>
  </div>
  <div data-role="content">
		<div id="transit_directions-panel"></div>
  </div>
</div>

<!--------------------------------AUTO INFO PAGE---------------------------------->
<div data-role="page" id="autoinfo" data-theme="h" class="page-map" style="height:100%;width:100%; position:relative" data-add-back-btn="true">
     <div data-role="header">
		<h1>Auto Info</h1>
	</div>
    
     <div data-role="content" align="center">
     	<p>Complaint Number:</p> 
        011-23378888
        <a href="tel:011-23378888" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" ></a>
        <p>Night Timings: 11pm-5am</p>
        
        <p>Extra Luggage Charges are not applicable for a shopping bag or a small suitcase.</p>
        
        <h3>SMS Complaint System</h3>
        
        < keyword > < Auto Reg No. > < Location > < Time > to 6767
        
        <p>Keywords -</p>
        
        Refusal Complaint 'REF'<br>
        Overcharging Complaint 'OVC'<br>
        Misbehaviour 'MIB'<br>
        Harassment 'HAR'<br>     
     </div>    

</div>


<!--------------------------------TAXI INFO PAGE---------------------------------->
<div data-role="page" id="taxiinfo" data-theme="g" class="page-map" style="height:100%;width:100%; position:relative" data-add-back-btn="true">
     <div data-role="header">
		<h1>Taxi Info</h1>
	</div>
    
     <div data-role="content" align="center">
		
        Meru cabs: 011-44224422
        <a href="tel:011-44224422" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" style="margin-left:54px;"></a>
        <br>
        Easy Cabs: 011-43434343
        <a href="tel:011-43434343" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" style="margin-left:50px;"></a>        
        <br>
        Quick Cabs: 011-45333333
        <a href="tel:011-45333333" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" style="margin-left:40px;" ></a>
     </div>    

</div>
<!--------------------------------TRANSIT INFO PAGE---------------------------------->
<div data-role="page" id="transitinfo" data-theme="j" class="page-map" style="height:100%;width:100%; position:relative" data-add-back-btn="true">
     <div data-role="header">
		<h1>Transit Info</h1>
	</div>
    
     <div data-role="content" align="center">
     	<h3>Delhi Metro</h3>
		<p>24 hrs. DMRC Helpline number</p> 
        55370<a href="tel:55370" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-message" data-iconpos="notext" data-theme="c" style="margin-left:72px;"></a>
       <br>011-22561231<a href="tel:011-22561231" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" style="margin-left:10px;"></a>
        <p>Airport Express Line Helpline number </p>
        011- 30802080<a href="tel:011- 30802080" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" style="margin-left:8px;"></a>
        <p>Security Helpline Number</p>
        011-22185555<a href="tel:011-22185555" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" style="margin-left:12px;"></a>
        
        <h3>DTC Bus Service</h3>
        <p>	Toll Free Helpline No. for Women, and other suggestions/complaints</p>
        1800-11 81 81<a href="tel:1800-11 81 81" data-role="button" data-inline="true" data-mini="true" data-icon="my-app-call" data-iconpos="notext" data-theme="c" style="margin-left:16px;"></a>
     	<br><a href="#lastmetro" data-role="button" data-icon="info" data-inline="true">See Last Metro Timings</a>
     </div> 
</div>


<!--------------------------------LAST METRO PAGE---------------------------------->
<div data-role="page" id="lastmetro" data-theme="j" class="page-map" style="height:100%;width:100%; position:relative" data-add-back-btn="true">
     <div data-role="header">
		<h1>Last Metro Timings</h1>
	</div>
    
     <div data-role="content" align="center">

       <div data-role="fieldcontain" data-inline="true">
         <label for="frommenu" class="select">From</label>
         <select name="frommenu" id="frommenu" onChange="fromsetter()" >
           <option value="Dilshad Garden">Dilshad Garden</option>
           <option value="Rithala">Rithala</option>
           <option value="Jahangirpuri">Jahangirpuri</option>
           <option value="Vishwavidyalaya">Vishwavidyalaya</option>           
           <option value="Noida City Center">Noida City Center</option> 
           <option value="Dwarka">Dwarka</option>  
           <option value="Huda City Center">Huda City Center</option> 
           <option value="Sarita Vihar">Sarita Vihar</option> 
           <option value="Mundka">Mundka</option>
           <option value="Kashmere Gate">Kashmere Gate</option>           
           <option value="Rajiv Chowk">Rajiv Chowk</option>                      
           <option value="Inderlok">Inderlok</option>
           <option value="Central Secretariat">Central Secretariat</option>                                 
           <option value="Anand Vihar">Anand Vihar</option>                                                                            
         </select>
         <label for="tomenu" class="select">To</label>
         <select name="tomenu" id="tomenu" onChange="tosetter()">
           <option value="Rithala">Rithala</option>           
           <option value="Dilshad Garden">Dilshad Garden</option>
           <option value="Jahangirpuri">Jahangirpuri</option>
           <option value="Vishwavidyalaya">Vishwavidyalaya</option>           
           <option value="Noida City Center">Noida City Center</option> 
           <option value="Dwarka">Dwarka</option>  
           <option value="Huda City Center">Huda City Center</option> 
           <option value="Sarita Vihar">Sarita Vihar</option> 
           <option value="Mundka">Mundka</option>                     
           <option value="Inderlok">Inderlok</option>
           <option value="Central Secretariat">Central Secretariat</option>                                 
           <option value="Anand Vihar">Anand Vihar</option>                                                                              
           <option value="Dwarka Sector 21">Dwarka Sector 21</option>                                                                                             
         </select>
         <p>           
         <a href="#" data-role="button" onClick="timeteller()" data-inline="true" data-theme="a">Get last metro time</a>
         </p>
       <div id="lasttime" align="center"></div>         
     </div> 
</div>
</div>


<!------------------- Tourist Attractions Page -------------------------------------->
<div data-role="page" id="tourist-to" data-add-back-btn="true" data-theme="i">
     
     <div data-role="header" align="center" style="width:100%;">
		<h1>Tourist Attractions</h1>
	</div>
    
     <div align="center">
     <a  name="toigate" id="toigate" href="#main" data-role="button" data-inline="true" data-mini="true"  onclick="india_gate()"><img src="images/India_Gate.jpg" width="160" height="120" name="India Gate"><br>India Gate</a>
     <a  name="torbhavan" id="torbhavan" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="r_bhavan()"><img src="images/Rashtrapati_Bhavan.jpg" width="160" height="120"><br>Rashtrapati Bhavan</a> 
     <a  name="tocp" id="tocp" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="cp()"><img src="images/CP.jpg" width="160" height="120"><br>Connaught Place</a>
     <a  name="tolodigarden" id="tolodigarden" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="lodi_garden()"><img src="images/LG.jpg" width="160" height="120"><br>Lodi Gardens</a>
     <a  name="tohumayun" id="tohumayun" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="humayun()"><img src="images/HT.jpg" width="160" height="120"><br>Humayun's Tomb</a>
     <a  name="tooldfort" id="tooldfort" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="purana()"><img src="images/PQ.jpg" width="160" height="120"><br>Purana  Qila</a>
     <a  name="toredfort" id="toredfort" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="red_fort()"><img src="images/RF.jpg" width="160" height="120"><br>Red Fort</a>
     <a  name="tocchowk" id="tocchowk" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="c_chowk()"><img src="images/CC.jpg" width="160" height="120"><br>Chandni Chowk</a>
     <a  name="tostomb" id="tostomb" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="safdarjung()"><img src="images/ST.jpg" width="160" height="120"><br>Safdarjung's Tomb</a>
     <a  name="toqminar" id="toqminar" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="qutub()"><img src="images/QM.jpg" width="160" height="120"><br>Qutub Minar</a>
     <a  name="totfort" id="totfort" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="tughlaqabad()"><img src="images/TF.jpg" width="160" height="120"><br>Tughlaqabad Fort</a>
     <a  name="toatemple" id="toatemple" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="akshardham()"><img src="images/AT.jpeg" width="160" height="120"><br>Akshardham Temple</a>
     <a  name="tobanglasahib" id="tobanglasahib" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="bangla_sahib()"><img src="images/BS.jpg" width="160" height="120"><br>Bangla Sahib</a>
     <a  name="tojmasjid" id="tojmasjid" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="jama_masjid()"><img src="images/JM.jpg" width="160" height="120"><br>Jama Masjid</a>
     <a  name="toltemple" id="toltemple" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="lotus_temple()"><img src="images/LT.jpg" width="160" height="120"><br>Lotus Temple</a> 
     </div>
</div>

<!------------------- Tourist Attractions FROM Page -------------------------------------->
<div data-role="page" id="tourist-from" data-add-back-btn="true" data-theme="i">
     
     <div data-role="header" align="center" style="width:100%;">
		<h1>Tourist Attractions</h1>
	</div>
    
     <div align="center">
     <a  name="fromigate" id="fromigate" href="#main" data-role="button" data-inline="true" data-mini="true"  onclick="india_gate_f()"><img src="images/India_Gate.jpg" width="160" height="120" name="India Gate"><br>India Gate</a>
     <a  name="fromrbhavan" id="fromrbhavan" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="r_bhavan_f()"><img src="images/Rashtrapati_Bhavan.jpg" width="160" height="120"><br>Rashtrapati Bhavan</a>     
     <a  name="fromcp" id="fromcp" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="cp_f()"><img src="images/CP.jpg" width="160" height="120"><br>Connaught Place</a>
     <a  name="fromlodigarden" id="fromlodigarden" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="lodi_garden_f()"><img src="images/LG.jpg" width="160" height="120"><br>Lodi Gardens</a>
     <a  name="fromhumayun" id="fromhumayun" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="humayun_f()"><img src="images/HT.jpg" width="160" height="120"><br>Humayun's Tomb</a>
     <a  name="fromoldfort" id="fromoldfort" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="purana_f()"><img src="images/PQ.jpg" width="160" height="120"><br>Purana  Qila</a>
     <a  name="fromredfort" id="fromredfort" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="red_fort_f()"><img src="images/RF.jpg" width="160" height="120"><br>Red Fort</a>
     <a  name="fromcchowk" id="fromcchowk" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="c_chowk_f()"><img src="images/CC.jpg" width="160" height="120"><br>Chandni Chowk</a>
     <a  name="fromstomb" id="fromstomb" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="safdarjung_f()"><img src="images/ST.jpg" width="160" height="120"><br>Safdarjung's Tomb</a>
     <a  name="fromqminar" id="fromqminar" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="qutub_f()"><img src="images/QM.jpg" width="160" height="120"><br>Qutub Minar</a>
     <a  name="fromtfort" id="fromtfort" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="tughlaqabad_f()"><img src="images/TF.jpg" width="160" height="120"><br>Tughlaqabad Fort</a>
     <a  name="fromatemple" id="fromatemple" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="akshardham_f()"><img src="images/AT.jpeg" width="160" height="120"><br>Akshardham Temple</a>
     <a  name="frombanglasahib" id="frombanglasahib" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="bangla_sahib_f()"><img src="images/BS.jpg" width="160" height="120"><br>Bangla Sahib</a>
     <a  name="fromjmasjid" id="fromjmasjid" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="jama_masjid_f()"><img src="images/JM.jpg" width="160" height="120"><br>Jama Masjid</a>
     <a  name="fromltemple" id="fromltemple" href="#main" data-role="button" data-inline="true" data-mini="true" onclick="lotus_temple_f()"><img src="images/LT.jpg" width="160" height="120"><br>Lotus Temple</a> </div>
</div>

</body>
</html>

